<!-- 帮助中心页面 -->
<template>
  <div class="help-center-container">
    <!-- 返回按钮 -->
    <button class="back-btn" @click="goBack">返回</button>

    <!-- 左侧导航栏 -->
    <div class="sidebar">
      <ul>
        <li v-for="(item, index) in helpTopics" :key="index" @click="selectTopic(item)">
          {{ item.title }}
        </li>
      </ul>
    </div>

    <!-- 右侧内容区域 -->
    <div class="content">
      <h2>{{ selectedTopic.title }}</h2>
      <div v-html="selectedTopic.content"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router' // 引入 vue-router

const router = useRouter() // 获取 router 实例

// 定义帮助主题数据
const helpTopics = [
  {
    title: '购物常见问题',
    content: `
      <ol>
        <li><strong>问：商品都是正品吗？</strong><br />
          答：本平台秉承一贯的严谨态度，对商品的产地、工艺、原材料都严格把关，力求帮消费者甄选到最优质的商品，您可以放心选购。
        </li>
        <li><strong>问：订单如何配送？</strong><br />
          答：我们会根据商品所在地、顾客所在地和商品的尺寸重量优选物流配送商，确保优质用户体验。目前暂不支持自选快递，具体物流信息可在下单成功后“我的订单-追踪物流”中查看。
        </li>
        <li><strong>问：我的包裹多长时间能送到？</strong><br />
          答：我们会在订单支付成功后1-3天内发货（节假日顺延，部分特殊商品七天内发货），送达时间视快递配送时间而定。
        </li>
        <li><strong>问：如何免运费？</strong><br />
          答：对于单笔所购商品总价金额（不含运费）大于或等于88元，我们提供一次免费送货服务（港澳台地区需大于或等于500元）。
        </li>
        <li><strong>问：在线支付已经成功，为什么我的订单状态还是显示“待付款”？</strong><br />
          答：可能是由于网络延迟导致支付状态更新不及时，请稍后再刷新页面查看。如仍显示“待付款”，请联系客服处理。
        </li>
      </ol>
    `
  
  },
  {
    title: '退换货政策',
    content: `<ol>
      <li><strong>问：如何申请退货？</strong><br />答：您可以在“我的订单”中找到对应订单，点击“申请售后”进行操作。</li>
      <li><strong>问：退换货时效是多久？</strong><br />答：自签收之日起7天内可申请无理由退换货。</li>
    </ol>`
  },
  {
    title: '账户与安全',
    content: `<ol>
      <li><strong>问：如何修改密码？</strong><br />答：进入“个人中心-安全设置”，输入旧密码并设置新密码。</li>
      <li><strong>问：忘记密码怎么办？</strong><br />答：点击登录页“忘记密码”，通过绑定手机号或邮箱重置密码。</li>
    </ol>`
  }

  // ... 其他 helpTopics 项保持不变 ...
]

const selectedTopic = ref(helpTopics[0])

function selectTopic(topic) {
  selectedTopic.value = topic
}

// 返回上一页的方法
function goBack() {
  router.back()
}
</script>

<style scoped>
.help-center-container {
  display: flex;
  padding: 40px;
  max-width: 1200px;
  margin: auto;
}

/* 添加返回按钮样式 */
.back-btn {
  position: absolute;
  top: 40px;
  left: 40px;
  padding: 10px 20px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.back-btn:hover {
  background-color: #e0e0e0;
}

.sidebar {
  width: 250px;
  border-right: 1px solid #ddd;
  padding-right: 20px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  cursor: pointer;
  padding: 10px;
  transition: background-color 0.3s;
}

.sidebar li:hover {
  background-color: #f0f0f0;
}

.content {
  flex: 1;
  padding-left: 30px;
}

.content h2 {
  color: #333;
}

.content ol {
  padding-left: 20px;
}

.content strong {
  color: #333;
}
</style>